<template>
  <div>
    <el-dialog :title="importTitle" :visible.sync="open" width="60%" append-to-body :before-close="closeDelDialog">
      <el-tabs v-model="activeName" style="width:90%;margin:0 auto;" @tab-click="handleClick">
        <el-tab-pane label="" name="first" :disabled="showFirst">
          <span slot="label" class="tab-label"><i class="el-icon-edit"></i> 第一步：填单子</span>
          <el-row :gutter="10" class="mb8" ref="refbut" style="margin-top: 10px">
            <el-col :span="1.5">
              <el-button type="primary" plain @click="importHandover">导入移交接收登记表</el-button>
            </el-col>
          </el-row>
          <transferComponent istype="2" ref="childComponent" :form="form"></transferComponent>
        </el-tab-pane>
        <el-tab-pane label="" name="second" :disabled="showSecond">
          <span slot="label" class="tab-label"><i class="el-icon-upload"></i> 第二步：导入数据包</span>
          <div :style="'height:' + tableHeight1 + 'px;overflow-y: auto;'">
            <el-row :gutter="10" class="mb8" ref="refbut" style="margin-top: 10px">
              <el-col :span="1.5">
                <el-upload class="upload-demo" ref="upload" :action="action" :headers="upload.headers" :on-preview="handlePreview" :on-remove="handleRemove"
                  :file-list="fileList" :auto-upload="false" :on-exceed="handleExceed" :limit="1" :data="uploadData" accept=".zip" :on-change="handleChange">
                  上传数据包：<el-button type="primary" plain>上传</el-button>
                </el-upload>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="mb8" ref="refbut" style="margin-top: 10px">
              <el-col :span="1.5">
                <el-button style="margin-left: 10px;" plain type="success" @click="submitUpload">确定</el-button>
                <el-button type="primary" plain @click="cancel">取消</el-button>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <!-- :disabled="showThird" -->
        <el-tab-pane label="" name="third" :disabled="showThird">
          <span slot="label" class="tab-label"><i class="el-icon-folder-checked"></i> 第三步：导入完成</span>
          <div :style="'height:' + tableHeight1 + 'px;overflow-y: auto;'">
            <div style="display: flex;">
              <span style="line-height: 40px; font-size: 18px; margin: 0 auto;">导入完成！</span>
            </div>
            <div style="display: flex;">
              <el-button plain type="success" @click="closeDelDialog" style="margin: 0 auto; margin-top: 10px">退出</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

    </el-dialog>

    <vimport v-if="upload.open" :upload="upload" :isType="false" :accept="accept" @closeDelDialog="closeDelDialog1"
             @handleFileSuccess="handleFileSuccess"></vimport>
  </div>
</template>

<script>
import transferComponent from "@/views/archive/archiveTransfer/transferComponent";
import vimport from '@/components/import/index.vue';
import {getToken} from "@/utils/auth";
import estimateTableHeight from "@/mixins/estimateTableHeight";

export default {
  name: "importData",
  props: ['open'],
  mixins: [estimateTableHeight], // 混入方法
  components:{
    transferComponent,
    vimport
  },
  data() {
    return {
      importTitle: '移交',
      activeName: 'first',
      form: {},
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        deptId: null,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: '',
        // 下载模板的地址
        // urlTemplate: ""
      },
      accept: '',
      showFirst: false,
      showSecond: true,
      showThird: true,
      tableHeight1: "",
      uploadData: undefined,
      fileList: [],
      action:  process.env.VUE_APP_BASE_API + "/archive/onlineReception/savePackage",
      limit: 1,
      file:""
    }
  },
  updated() {
    this.tableHeight1 = this.tableHeight + 130;
  },
  methods: {
    init() {
      this.form = {}
      this.fileList = []
      this.showFirst = false
      this.showSecond = true
      this.showThird = true
      this.activeName = 'first'
    },
    handleClick(tab, event) {
      if(tab.name == 'second') {
        this.showFirst = true
      } else if (tab.name == 'third') {
        this.showSecond = true
      }
    },
    closeDelDialog() {
      this.fileList = []
      this.file="";
      this.$emit('closeDelDialog')
    },
    // 导入移交接收登记表
    importHandover() {
      this.accept = ".xlsx, .xls"
      this.upload.open = true
      this.upload.title = '移交单导入'
      this.upload.url = process.env.VUE_APP_BASE_API + "/archive/onlineReception/importData"
    },
    closeDelDialog1() {
      this.upload.open = false;
    },
    handleFileSuccess(response) {
      this.upload.open = false;
      this.upload.isUploading = false;
      if (response.code == "500") {
        this.$message({ message: '导入失败', type: 'error' })
      } else {
        // console.log(response.data)
        this.form = response.data
        const writtenTime = response.data.writtenTime.match(/\d+/g);
                this.form.writtenTimeYear = writtenTime[0];
                this.form.writtenTimeMouth = writtenTime[1];
                this.form.writtenTimeData = writtenTime[2];
                const auditorTime = response.data.auditorTime.match(/\d+/g);
                this.form.auditorTimeYear = auditorTime[0];
                this.form.auditorTimeMouth = auditorTime[1];
                this.form.auditorTimeData = auditorTime[2];
                const unitTime = response.data.unitTime.match(/\d+/g);
                this.form.unitTimeYear = unitTime[0];
                this.form.unitTimeMouth = unitTime[1];
                this.form.unitTimeData = unitTime[2];
     
        this.showSecond = false
        this.uploadData = {
          id: this.form.id
        }
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);

    },
    handlePreview(file, fileList) {
      
     
    },
    handleExceed() {
      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
    },

    handleChange(file, fileList){
      console.log(file,fileList)
      this.file=file;
    },
    // 确定
    submitUpload() {

      console.log(this.file,this.file!=''&&this.file!="null"&&this.file!=undefined)
      if(this.file!=''&&this.file!="null"&&this.file!=undefined){
      this.$refs.upload.submit();
      this.showThird = false
      this.activeName = 'third'
    }else{
      this.$modal.msgError(`请上传数据包`);
    }
    },
    // 取消
    cancel() {
      this.fileList = []
      this.file="";
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-label {
  font-size: 16px; /* 设置标签的字体大小 */
  width: 300px; /* 设置标签的宽度 */
  display: flex;
  justify-content: center; /* 让标签居中展示 */
  align-items: center;
}
</style>
